<template>
  <div class="list">
    <div
      class="li van-hairline--bottom"
      v-if="data.showHeader"
    >
      <div
        class="item title"
        v-for="field in data.fields"
        :key="field.name"
      >
        {{field.title}}
      </div>
    </div>
    <div
      class="li van-hairline--bottom"
      v-for="(item,index) in data.data"
      :key="index"
    >
      <div
        class="item"
        v-for="field in data.fields"
        :key="field.name"
      >
        {{item[field.name]}}
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'index',
    props: {
      data: {
        type: Object,
        default: () => ({})
      }
    }
  };
</script>

<style scoped lang="less">
  .list {
    padding: 6px;
    background: #ffffff;

    .li {
      display: flex;
      @height: 42px;
      height: @height;
      line-height: @height;

      &.title {
      }

      .item {
        flex: 1;
        text-align: center;
      }

      &:last-child {
        &::after {
          display: none;
          height: 0;
        }
      }
    }
  }
</style>
